<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '入住登记',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>
<template>
  <view class="w-[100vw] h-[100vh] box-border contentBox">
    <wd-form ref="form" :model="model">
      <wd-cell-group custom-class="group" border>
        <!-- <wd-select-picker
          label="提交人"
          v-model="model.resideUserId"
          :columns="userList"
          label-width="100px"
          prop="resideUserId"
          placeholder="请选择提交人"
          type="radio"
          :rules="[{ required: true, message: '请填写提交人' }]"
          clearable
          filterable
        ></wd-select-picker> -->
        <wd-input
          label="提交人"
          label-width="100px"
          disabled
          v-model="userInfo.nickName"
          placeholder="暂无数据"
        />
        <wd-input
          label="客户名称"
          label-width="100px"
          prop="customerName"
          clearable
          v-model="model.customerName"
          placeholder="请输入客户名称"
        />
        <wd-input
          label="公司名称"
          label-width="100px"
          prop="customerCompany"
          clearable
          v-model="model.customerCompany"
          placeholder="请输入公司名称"
        />
        <wd-input
          label="联系电话"
          label-width="100px"
          prop="customerPhone"
          clearable
          v-model="model.customerPhone"
          placeholder="请输入联系电话"
        />
        <wd-input
          label="出差事由"
          label-width="100px"
          prop="resideCause"
          clearable
          v-model="model.resideCause"
          placeholder="请输入出差事由"
          :rules="[{ required: true, message: '请填写出差事由' }]"
        />
        <wd-calendar
          type="date"
          label-width="100px"
          prop="resideInDate"
          placeholder="请选择申请入住日期"
          v-model="model.resideInDate"
          label="申请入住日期"
          :rules="[{ required: true, message: '请选择申请入住日期' }]"
        />
        <wd-calendar
          type="date"
          label-width="100px"
          prop="resideOutDate"
          placeholder="请选择预计退房日期"
          v-model="model.resideOutDate"
          label="预计退房日期"
          :rules="[{ required: true, message: '请选择预计退房日期' }]"
        />
        <wd-input
          label="入住天数"
          label-width="100px"
          prop="dayNumber"
          readonly
          clearable
          v-model="model.dayNumber"
          placeholder="请输入入住天数"
        />
        <wd-input
          label="特殊要求"
          label-width="100px"
          prop="specialRequirements"
          clearable
          v-model="model.specialRequirements"
          placeholder="请输入特殊要求"
        />
      </wd-cell-group>
    </wd-form>
    <view class="bottomBox">
      <view class="text-center" @click="saveData">
        <wd-icon name="save" size="24px"></wd-icon>
        <view>保存</view>
      </view>
      <view class="btnBox">
        <wd-button type="primary" custom-class="btn" @click="submit">提交</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="js">
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { userRegister, userSearch } from '@/api/staff/registration.js'
import dayjs from 'dayjs'
import { useSysStore } from '@/store/systemInfo'
import { useStaffStore } from '@/store'
import { watch } from 'vue'

defineOptions({
  name: 'Registration',
})

const sysStore = useSysStore()
const staffStore = useStaffStore()

const model = ref({})
const form = ref(null)
const userInfo = ref({})
const userList = ref([])

const submit = () => {
  form.value.validate().then(async (data) => {
    if (data.valid) {
      const res = await userRegister({
        ...model.value,
        resideInDate: dayjs(model.value.resideInDate).format('YYYY-MM-DD'),
        resideOutDate: dayjs(model.value.resideOutDate).format('YYYY-MM-DD'),
        resideUserId: userInfo.value.userId,
        resideUserName: userInfo.value.nickName,
      })
      if (res.data.code == 200) {
        uni.showToast({
          title: '提交成功',
          icon: 'none',
        })
        uni.navigateBack()
      }
    }
  })
}

onLoad(() => {
  // getUserInfo()
})
onMounted(() => {
  userInfo.value = { ...sysStore.userInfo }
  model.value = { ...staffStore.staffInfo }
})
watch(
  () => model.value.resideInDate,
  () => {
    changeDate()
  },
)
watch(
  () => model.value.resideOutDate,
  () => {
    changeDate()
  },
)

// 时间修改事件
const changeDate = () => {
  if (model.value.resideInDate && model.value.resideOutDate) {
    const code = dayjs(model.value.resideOutDate).diff(model.value.resideInDate, 'day')
    if (code <= 0) {
      uni.showToast({
        title: '入住日期不能大于或等于退房日期',
        icon: 'none',
      })
      model.value.resideOutDate = ''
      return
    }
    model.value.dayNumber = code
  }
}

// 点击暂存
const saveData = () => {
  staffStore.setStaffInfo(model.value)
  uni.showToast({
    title: '暂存成功',
    icon: 'none',
  })
}
</script>

<style lang="scss" scoped>
:deep() {
  .wd-input__inner {
    color: black !important;
  }
}
.contentBox {
  background-color: #f1f1f1;
  padding: 30upx;
  .bottomBox {
    height: 180upx;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30px;
    box-sizing: border-box;
    .btnBox {
      width: 82%;
      :deep() {
        .btn {
          width: 100%;
        }
      }
    }
  }
}
</style>
